<template>
  <div id="multiple-choice">
    <el-form ref="form" :model="form" label-width="80px" style="width: 530px">
      <el-form-item label="题干">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="题目选项">
        <el-checkbox-group v-model="form.option">
          <el-checkbox label="0" style="margin-bottom: 20px">A&nbsp;&nbsp;&nbsp;<el-input style="width: 400px"
                                                                                          v-model="contentA"></el-input>
          </el-checkbox>
          <el-checkbox label="1" style="margin-bottom: 20px">B&nbsp;&nbsp;&nbsp;<el-input style="width: 400px"
                                                                                          v-model="contentB"></el-input>
          </el-checkbox>
          <el-checkbox label="2" style="margin-bottom: 20px">C&nbsp;&nbsp;&nbsp;<el-input style="width: 400px"
                                                                                          v-model="contentC"></el-input>
          </el-checkbox>
          <el-checkbox label="3" style="margin-bottom: 20px">D&nbsp;&nbsp;&nbsp;<el-input style="width: 400px"
                                                                                          v-model="contentD"></el-input>
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="答案解析">
        <el-input type="textarea" v-model="form.parsing"></el-input>
      </el-form-item>
      <el-form-item label="难易程度">
        <el-select v-model="form.hardLevel" placeholder="请选难易等级">
          <el-option label="易" value="1"></el-option>
          <el-option label="中" value="2"></el-option>
          <el-option label="难" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button @click="returnUrl()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MultipleChoice",
  data() {
    return {
      form: {
        title: '',
        option: [],
        parsing: '',
        hardLevel: ''
      },
      questionOption: [],
      questionAnswer: [],
      contentA: '',
      contentB: '',
      contentC: '',
      contentD: ''
    }
  },
  methods: {
    onSubmit() {
      // console.log(this.form.option)
      this.questionOption.push(this.contentA)
      this.questionOption.push(this.contentB)
      this.questionOption.push(this.contentC)
      this.questionOption.push(this.contentD)
      for (var i = 0; i < this.form.option.length; i++) {
        this.questionAnswer.push(this.questionOption[this.form.option[i]])
      }
      // console.log(this.questionAnswer)
      let questionAo = {
        courseId: localStorage.getItem('courseIndex'),
        questionAnswer: this.questionAnswer,
        questionHardLevel: this.form.hardLevel,
        questionOption: this.questionOption,
        questionResolve: this.form.parsing,
        questionSortId: localStorage.getItem('questionSortId'),
        questionTitle: this.form.title,
        userName: localStorage.getItem('userName')
      }
      console.log(questionAo)
      axios({
        url: '/question/add',
        data: questionAo,
        method: 'Post',
        headers: {
          "Content-type": "application/json;charset=utf-8"
        }
      }).then(res => {
        console.log(res.data)
        this.$router.push('/Question')
      }).catch(function (error) {
        console.log(error);
      });
    },
    returnUrl() {
      this.$router.push('/Question')
    }
  }
}
</script>

<style scoped>

</style>
